<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/vue.global.js"></script>

    <script type="text/javascript">
        $(function(){
            const app = {
              data() {
                return {
                  message: '',
                  message2: ''
                }
              }
            }
            Vue.createApp(app).mount('#app')

            const app2 = {
              data() {
                return {
                  checked : false,
                  checkedNames: []
                }
              }
            }
            Vue.createApp(app2).mount('#app2')

            const app3 = {
              data() {
                return {
                  picked : ''
                }
              }
            }
            Vue.createApp(app3).mount('#app3')

            const app4 = {
              data() {
                return {
                  selected: '' 
                }
              }
            }
            Vue.createApp(app4).mount('#app4')

            const app5 = {
              data() {
                return {
                  selected: ''
                }
              }
            }
            Vue.createApp(app5).mount('#app5')

            const app6 = {
              data() {
                return {
                  selected: '',
                  options: [
                    { text: 'None', value: '' },
                    { text: 'Runoob', value: 'www.runoob.com' },
                    { text: 'Google', value: 'www.google.com' },
                    { text: 'Taobao', value: 'www.taobao.com' }
                  ]
                }
              }
            }
            Vue.createApp(app6).mount('#app6')
        })
    </script>
</head>
<body>
<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>input 表单消息是: {{ message }}</p>
  <p>textarea 元素：</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
  <p>textarea 表单消息是:</p>
  <p style="white-space: pre">{{ message2 }}</p>
</div>
<br>
<br>
<div id="app2">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>
<br>
<br>
<div id="app3">
  <input type="radio" id="runoob2" value="Runoob" v-model="picked">
  <label for="runoob2">Runoob</label>
  <br>
  <input type="radio" id="google2" value="Google" v-model="picked">
  <label for="google2">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
</div>
<br>
<br>
<div id="app4">
  <select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>
<br>
<br>
<div id="app5">
  <select v-model="selected" name="fruit" multiple>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
    <option value="www.taobao.com">Taobao</option>
  </select>
  <div id="output2">
      选择的网站是: {{selected}}
  </div>
</div>
<br>
<br>
<div id="app6" class="demo">
  <select v-model="selected">
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>
  <span>选择的是: {{ selected }}</span>
</div>
</body>
</html>